<template>
  <div style="margin-top: 10px">
    <div style="background-color: white; padding: 10px">
      <!--收货地址-->
      <div style="padding: 10px; margin-bottom: 20px; border-bottom: 1px solid #eee">
        <div style="font-size: 20px; border-bottom: 2px solid dodgerblue; padding-bottom: 10px; margin-bottom: 20px">
          收货地址
        </div>
        <div v-if="this.addressData.length!==0">
          <el-popover
              placement="right"
              width="400"
              trigger="click">
            <el-table
                @select="select"
                @select-all="selectAll"
                ref="multipleTable"
                :show-overflow-tooltip="false"
                :data="addressData"
                style="width: 100%">
              <el-table-column
                  label="选择"
                  type="selection"
                  width="55">
              </el-table-column>
              <el-table-column
                  label="序号"
                  type=index>
              </el-table-column>
              <el-table-column
                  prop="recreceiver"
                  label="收货人"
                  width="80">
                <template slot-scope="scope">
                  <span>{{ scope.row.recreceiver }}</span>
                </template>
              </el-table-column>
              <el-table-column
                  prop="rephone"
                  label="联系方式"
                  width="125">
                <template slot-scope="scope">
                  <span>{{ scope.row.rephone }}</span>
                </template>
              </el-table-column>
              <el-table-column
                  prop="readdress"
                  label="收货地址"
                  width="200"
                  align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.readdress }}</span>
                </template>
              </el-table-column>
              <el-table-column
                  prop="rectreet"
                  label="详细地址"
                  width="180">
                <template slot-scope="scope">
                  <span>{{ scope.row.rectreet }}</span>
                </template>
              </el-table-column>
            </el-table>
            <el-button slot="reference" type="primary">点击选择地址</el-button>
          </el-popover>
        </div>
        <div v-else>
          <el-button type="success" @click="$router.push('/front/address')">还没设置地址,去设置</el-button>
        </div>
      </div>

      <!--        商品确认-->
      <div>
        <el-table :data="data" stripe style="width: 100%">
          <el-table-column label="商品图片" width="150">
            <template slot-scope="scope">
              <el-image :src="data[scope.$index].simage" style="width: 100px; height: 100px;" fit="contain"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="sname" label="商品名称"></el-table-column>
          <el-table-column label="价格" prop="sprices">
          </el-table-column>
          <el-table-column label="数量">
            <template slot-scope="scope">
              <el-tag type="primary">{{ nums[scope.$index] }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="鞋码">
            <template slot-scope="scope">
              <el-tag type="primary">{{ sizes[scope.$index] }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: 10px">
        <div style="background-color: white; padding: 10px">
          <div style="color: red; text-align: right">
            <div>
              <span>总价：</span>
              <span>￥ {{ totalPrice }}</span>
            </div>
            <div style="text-align: right; color: #999; font-size: 12px; padding: 5px 0">
              运费： ￥ 0
            </div>
            <div style="text-align: right; color: #999; font-size: 12px;">
              已优惠： - ￥{{ totaldiscount }}
            </div>
            <div style="padding: 10px 0">
              <el-button style="background-color: red; color: white; width: 100px" @click="submitOrder">提交订单</el-button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

export default {
  name: "cart",
  data() {
    return {
      data: [],
      chooseAddress: {},
      user: {},
      cart: {},
      nums: [],
      sizes:[],
      addressData: [],
      totalPrice: 0,
      totaldiscount: 0,

    }
  },
  created() {
    this.user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    if (!this.user) {
      this.$message({
        type: "warning",
        message: '请登录！'
      })
      return
    }
    this.load()
    this.loadAddressData()
  },
  methods: {
    load() {
      // this.data = this.$route.query.tableData
      this.data = localStorage.getItem("tableData") ? JSON.parse(localStorage.getItem("tableData")) : []
      console.log("this.data===========", this.data[0].sid)
      this.nums = this.$route.query.nums
      this.sizes = this.$route.query.sizes
      console.log(this.nums)
      this.totalPrice = this.$route.query.totalPrice
      this.totaldiscount = this.$route.query.totaldiscount
    },
    loadAddressData() {
      axios.get("receives/" + this.user.uid).then(res => {
        this.addressData = res.data.data
        // console.log("addressData=========================", this.addressData)
        // this.editForm.selectedOptions
        // let name =this.addressData.map(item => name += TextToCode[item] + '/')
      })
    },
    submitOrder() {
      console.log(this.chooseAddress)
      if (!this.chooseAddress.readdress) {
        this.$message({
          type: 'warning',
          message: '请选择收货地址！'
        })
        return
      }
      // 提交订单
      this.data.forEach((item, index) => {
        let sid = item.sid
        console.log(sid)
        axios.post("/orders/save?ouid=" +
            this.user.uid + "&orecid=" + this.chooseAddress.recid + "&sid=" + sid +"&ototal=" + this.totalPrice + "&ocount=" + this.nums[index]+"&size=" +this.sizes[index]
        ).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: '提交成功！'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg
            })
          }
        })
        this.$router.replace("/front/order")
      })
    },
    select(selection, row) {
      console.log("selection", selection)
      //console.log(this.chooseAddress)
      console.log(row)
      if (selection.length > 1) {
        this.$message.success("选择成功")
        let del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false) // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
      } else if (selection.length === 1) {
        this.$message.success("选择成功")
        this.chooseAddress = row
        console.log("this.chooseAddress======================", this.chooseAddress)
      } else {
        this.$message.warning("已取消选择！")
        this.chooseAddress = {}
        console.log("this.chooseAddress,", this.chooseAddress)
      }
    },
    selectAll(selection) {
      if (selection.length > 1) {
        selection.length = 1
      }
    },

  }
}
</script>

<style scoped>

</style>
